<template>
  <div>
    <el-dialog title="修改用户" :visible.sync="buttontype" @close="fun(tname)">
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        v-if="deptarr && form"
      >
        <!-- 角色名称 -->
        <el-form-item label="角色名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <!-- 角色编码 -->
        <el-form-item label="角色编码">
          <el-input v-model="form.tips"></el-input>
        </el-form-item>
        <!-- 部门 -->
        <el-form-item label="部门">
          <el-cascader
            v-model="form.deptid"
            :options="deptarr"
            :props="props"
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="upuser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { http, role, deptlist } from "../../api/api";
export default {
  props: ["type", "fun", "tname", "tablerow"],
  data() {
    return {
      buttontype: this.type, //模态框状态
      formtype: {
        //数据
        name: "", //角色名称
        tips: "", //角色编码
        deptid: "", //部门id
      },
      form: "",
      deptarr: "", //部门信息
      props: {
        //联级选择配置
        value: "id",
        label: "simplename",
        children: "children",
      },
    };
  },
  mounted() {
    this.getdeptlist();
  },
  methods: {
    upuser() {
      //  修改角色, 传进去
      var type = true;
      for (var i in this.formtype) {
        if (this.form[i] === "") {
          type = false;
        }
      }
      if (type) {
        if (Array.isArray(this.form.deptid)) {
          this.form.deptid = this.form.deptid[this.form.deptid.length - 1];
        }
        this.$http
          .post(http + role, JSON.stringify(this.form), { emulateJSON: true })
          .then(
            (data) => {
              console.log(data.data);
              if (data.data.msg == "成功") {
                this.buttontype = false;
                // for (var i in this.form) {
                //   this.form[i] = "";
                // }
                this.form = "";
              } else {
                this.$message.error(data.data.message);
              }
            },
            (error) => {
              /*  if (error.data.message == "该用户已经注册") {
              this.$message.error("该用户已经注册");
            } else {
              window.location = "./login.html";
            } */
              this.$message.error(error.data.message);
            }
          );
      } else {
        this.$message.error("请补全信息");
      }
    },
    // 递归验证
    childrenull(data) {
      console.log(data.length);
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length == 0) {
          data[i].children = null;
        } else {
          this.childrenull(data[i].children);
        }
      }
      return data;
    },
    getdeptlist() {
      // 获取部门信息
      this.$http.get(http + deptlist).then(
        (data) => {
          if (data.data.msg == "成功") {
            this.deptarr = this.childrenull(data.data.data);
          } else {
            this.$message.error(data.data.message);
          }
          console.log(data.data.data);
        },
        (err) => {
          this.$message.error(err.data.message);
        }
      );
    },
  },
  watch: {
    type() {
      this.buttontype = this.type;
    },
    tablerow() {
      // 浅拷贝变深拷贝
      var json = {};
      for (var i in this.tablerow) {
        this.$set(json, i, this.tablerow[i].toString());
      }
      this.form = json;
      console.log(this.form);
    },
  },
};
</script>

<style>
</style>